<%--
  Date: 2024/10/12 13:43
  Description:
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>成绩新增</title>
    <!-- 引入 layui.css -->
    <link href="//unpkg.com/layui@2.9.17/dist/css/layui.css" rel="stylesheet">
    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="//unpkg.com/layui@2.9.17/dist/layui.js"></script>
    <style>
        .box{
            width: 400px;
            height: 300px;
            text-align: center;
            margin: 50px auto;
        }
        p{
            margin: 10px;
        }
    </style>
</head>
<body>
<%-- 表单
 http://localhost:8080/javaweb/score?method=scoreList
 http://localhost:8080/javaweb/addScore.jsp
--%>
<div class="box">
    <h3 style="color: #16baaa">添加成绩信息</h3>

<%-- jsp原生操作实现数据添加--%>
<%--    <form action="" >--%>
<%--        <p><input type="text" name="name"  placeholder="请输入学生姓名"  class="layui-input" value="${score.name}"></p>--%>
<%--        <p><input type="text" name="course" placeholder="请输入科目名称"  class="layui-input" value="${score.course}"></p>--%>
<%--        <p><input type="text" name="score" placeholder="请输入成绩"   class="layui-input" value="${score.score}"></p>--%>
<%--        <p><input type="submit" class="layui-btn" value="提交" ></p>--%>
<%--    </form>--%>


<%--    通过layui组件库实现数据添加
lay-verify="required"   必填项
--%>
    <form class="layui-form"  action="" >
        <p><input type="text" name="name"  placeholder="请输入学生姓名" lay-verify="required" lay-reqtext="学生姓名不能为空" class="layui-input" value="${score.name}"></p>
        <p><input type="text" name="course" placeholder="请输入科目名称" lay-verify="required" lay-reqtext="科目名称不能为空" class="layui-input" value="${score.course}"></p>
        <p><input type="text" name="score" placeholder="请输入成绩"  lay-verify="required" lay-reqtext="成绩信息不能为空" class="layui-input" value="${score.score}"></p>
        <p>
            <button type="submit" class="layui-btn" lay-submit lay-filter="scoreFilter">立即提交</button>
        </p>
    </form>

<%--    <span>${info}</span>--%>
<%--    &lt;%&ndash;移除提示信息&ndash;%&gt;--%>
<%--    <c:remove var="info" scope="request"></c:remove>--%>
</div>

<script>
/*
*   json字符串解析
*           console.log(typeof  field)
            console.log(field)
            console.log(field.name)

            // javascript 对象  -> string 字符串
            let s = JSON.stringify(field);
            console.log(typeof  s)
            console.log(s)
            console.log(s.name)

            console.log("-------------------------------")
            // json 格式字符串
            let res = '{"code":0,"msg":"hello json","count":200}'
            // json字符串   转换成  javascript对象
            res  = JSON.parse(res);
            console.log(typeof  res)
            console.log(res.code)
* */
    layui.use('form',function (){
        let form = layui.form,
            layer = layui.layer,
        $ = layui.jquery;
        // 提交事件  lay-filter="scoreFilter"  提交按钮  data  表单对象
        form.on('submit(scoreFilter)', function(data){
            let field = data.field; // 获取表单字段值  js {name:'',course:'',score:90}
            // 此处可执行 Ajax 等操作  异步请求   提交数据  http请求  编程的方式 实现请求发送  jquery 发送http请求   异步发送  同步
            $.ajax({
                url:'/javaweb/score/layui?method=saveScore',  // 请求地址
                data:field,  //  请求携带数据  {}
                type:'POST',  // 设置请求的方式  post  get
                dataType:'JSON', // 设置响应数据格式
                success:function (res){   //  请求成功后的回调函数  隐式数据转换  json字符串  ->javascript对象
                    console.log(typeof  res)  //  object
                    if (res.code==0){  //  添加成功
                        // 提示用户信息
                        layer.msg(res.msg,{icon:1,time:3000},function (){  // 弹窗提示结束回调
                            // 关闭弹出层
                            var index = parent.layer.getFrameIndex(window.name); // 先得到当前 iframe 层的索引
                            parent.layer.close(index); // 再执行关闭
                            // 重载表格数据  layer.open({end:function(){})
                        })
                    }else {
                        layer.msg(res.msg,{icon:2,time:3000})
                    }
                },
                error:function (err){  //  请求异常后的回调函数
                    console.log(err)
                }
            })

            return false; // 阻止默认 form 跳转
        });

    })


</script>

</body>
</html>
